<template>
  <div id="businessAdd" v-loading="loading">
    <div class="content-box">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        :disabled="type === 'view'"
      >
        <div class="fifty">
          <el-form-item label="审批系统名称：" prop="sysName">
            <el-input v-model="ruleForm.sysName"></el-input>
          </el-form-item>
          <el-form-item label="部署层级：" prop="deployLevel">
            <el-select v-model="ruleForm.deployLevel">
              <el-option
                v-for="item in deployLevelArr"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属地区：" prop="areaName">
            <!-- <el-input v-if="type !== 'add'" v-model="ruleForm.areaName" disabled></el-input> -->
            <vTreeSelectionArea
              @appEvent="getAreaNode"
              @clearEvent="clearArea"
              ref="areaChild"
              :width="`${200}px`"
              :treeData="areaData"
              :setLabelValue="ruleForm.areaName"
              class="handle-input"
            ></vTreeSelectionArea>
          </el-form-item>
          <el-form-item label="系统架构：" prop="sysFrame">
            <el-select v-model="ruleForm.sysFrame">
              <el-option
                v-for="item in sysFrameArr"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开发公司：">
            <el-input v-model="ruleForm.sysCompany"></el-input>
          </el-form-item>
        </div>
        <div class="fifty">
          <el-form-item label="技术联络人员：">
            <el-input v-model="ruleForm.technologyName"></el-input>
          </el-form-item>
          <el-form-item label="技术人员电话：">
            <el-input v-model="ruleForm.technologyTel"></el-input>
          </el-form-item>
          <el-form-item label="业务人员：">
            <el-input v-model="ruleForm.businessName"></el-input>
          </el-form-item>
          <el-form-item label="业务人员电话：">
            <el-input v-model="ruleForm.businessTel"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="是否具备审批端系统：">
          <el-radio-group v-model="ruleForm.checkAuthSys">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 审批端正式环境 -->
        <el-card class="fifty box-card" v-if="ruleForm.checkAuthSys === '1'">
          <div slot="header" class="clearfix">
            <span>审批端正式环境</span>
          </div>
          <el-form-item label="访问网址：">
            <el-input v-model="ruleForm.authProdUrl"></el-input>
          </el-form-item>
          <el-form-item label="网络环境：">
            <el-radio-group v-model="ruleForm.authProdNetwork">
              <el-radio v-for="item in netEnv" :key="item.value" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="系统验证方式：" style="width:100%">
            <el-checkbox-group v-model="ruleForm.authProdVerifyType">
              <el-checkbox
                v-for="item in sysValidation"
                :key="item.value"
                :label="item.value"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="是否可获取办结状态：">
            <el-radio-group v-model="ruleForm.authProdAcquireResult">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="其他验证方式描述：">
            <el-input v-model="ruleForm.authProdOtherVerify"></el-input>
          </el-form-item>
        </el-card>
        <el-form-item label="审批端是否具备测试环境：">
          <el-radio-group v-model="ruleForm.checkAuthTest">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 审批端测试环境 -->
        <el-card class="fifty box-card" v-if="ruleForm.checkAuthTest === '1'">
          <div slot="header" class="clearfix">
            <span>审批端测试环境</span>
          </div>
          <el-form-item label="访问网址：">
            <el-input v-model="ruleForm.authTestUrl"></el-input>
          </el-form-item>
          <el-form-item label="网络环境：">
            <el-radio-group v-model="ruleForm.authTestNetwork">
              <el-radio v-for="item in netEnv" :key="item.value" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="系统验证方式：" style="width:100%">
            <el-checkbox-group v-model="ruleForm.authTestVerifyType">
              <el-checkbox
                v-for="item in sysValidation"
                :key="item.value"
                :label="item.value"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="是否可获取办结状态：">
            <el-radio-group v-model="ruleForm.authTestAcquireResult">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="其他验证方式描述：">
            <el-input v-model="ruleForm.authTestOtherVerify"></el-input>
          </el-form-item>
        </el-card>
        <el-form-item label="是否具备公众端系统：">
          <el-radio-group v-model="ruleForm.checkPubSys">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 公共端正式环境 -->
        <el-card class="fifty box-card" v-if="ruleForm.checkPubSys === '1'">
          <div slot="header" class="clearfix">
            <span>公共端正式环境</span>
          </div>
          <el-form-item label="访问网址：">
            <el-input v-model="ruleForm.publicProdUrl"></el-input>
          </el-form-item>
          <el-form-item label="网络环境：">
            <el-radio-group v-model="ruleForm.publicProdNetwork">
              <el-radio v-for="item in netEnv" :key="item.value" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="系统验证方式：" style="width:100%">
            <el-checkbox-group v-model="ruleForm.publicProdVerifyType">
              <el-checkbox
                v-for="item in sysValidation"
                :key="item.value"
                :label="item.value"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="是否可获取办结状态：">
            <el-radio-group v-model="ruleForm.publicProdAcquireResult">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="其他验证方式描述：">
            <el-input v-model="ruleForm.publicProdOtherVerify"></el-input>
          </el-form-item>
        </el-card>
        <el-form-item label="公众端是否具备测试环境：">
          <el-radio-group v-model="ruleForm.checkPubTest">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 公共端测试环境 -->
        <el-card class="fifty box-card" v-if="ruleForm.checkPubTest === '1'">
          <div slot="header" class="clearfix">
            <span>公共端测试环境</span>
          </div>
          <el-form-item label="访问网址：">
            <el-input v-model="ruleForm.publicTestUrl"></el-input>
          </el-form-item>
          <el-form-item label="网络环境：">
            <el-radio-group v-model="ruleForm.publicTestNetwork">
              <el-radio v-for="item in netEnv" :key="item.value" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="系统验证方式：" style="width:100%">
            <el-checkbox-group v-model="ruleForm.publicTestVerifyType">
              <el-checkbox
                v-for="item in sysValidation"
                :key="item.value"
                :label="item.value"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="是否可获取办结状态：">
            <el-radio-group v-model="ruleForm.publicTestAcquireResult">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="其他验证方式描述：">
            <el-input v-model="ruleForm.publicTestOtherVerify"></el-input>
          </el-form-item>
        </el-card>
      </el-form>
      <div class="button-box">
        <el-button
          v-if="this.$route.query.type !== 'view'"
          type="primary"
          @click="submitForm('ruleForm')"
        >保 存</el-button>
        <el-button @click="backPage()">返 回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import * as commonApi from '@/api/commonApi.js';
import Subtitle from '@/components/common/Subtitle'
import vTreeSelectionArea from '@/components/common/TreeSelectionArea';
export default {
  name:'businessAdd',
  components:{ 
    Subtitle,
    vTreeSelectionArea
  },
  watch:{
    'sysFrameArr': (val) => {

    }
  },
  data(){
    return {
      type:this.$route.query.type,
      loading:false,
      deployLevelArr:[],// 部署层级
      sysFrameArr:[],// 系统架构
      sysValidation:[],// 系统验证方式
      netEnv:[],// 网络环境
      currentRegionId:'',
      areaLabelValue:'',
      areaData: [],
      ruleForm:{
        sysName: '',
        deployLevel:'',
        areaName:'',
        areaCode:'',
        areaId:'',
        sysFrame:'',
        sysCompany:'',
        technologyName:'',
        technologyTel:'',
        businessName:'',
        businessTel:'',
        checkAuthSys:'0',
        checkAuthTest:'0',
        checkPubSys:'0',
        checkPubTest:'0',
        // 审批端正式环境
        authProdUrl:'',
        authProdNetwork:'',
        authProdVerifyType:[],
        authProdAcquireResult:'0',
        authProdOtherVerify:'',
        // 审批端测试环境
        authTestUrl:'',
        authTestNetwork:'',
        authTestVerifyType:[],
        authTestAcquireResult:'0',
        authTestOtherVerify:'',
        // 公共端正式环境
        publicProdUrl:'',
        publicProdNetwork:'',
        publicProdVerifyType:[],
        publicProdAcquireResult:'0',
        publicProdOtherVerify:'',
        // 公共端测试环境
        publicTestUrl:'',
        publicTestNetwork:'',
        publicTestVerifyType:[],
        publicTestAcquireResult:'0',
        publicTestOtherVerify:''
      },
      rules:{
        sysName: [
          { required: true, message: '请输入审批系统名称', trigger: 'click' }
        ],
        deployLevel: [
          { required: true, message: '请输入部署层级', trigger: 'click' }
        ],
        // areaName: [
        //   { required: true, message: '请输入所属地区', trigger: 'click' }
        // ],
        sysFrame: [
          { required: true, message: '请输入系统架构', trigger: 'click' }
        ]
      }
    }
  },
  created(){
    this.getDict('deployment_hierarchy','deployLevelArr') // 部署层级
    this.getDict('system_architecture','sysFrameArr')// 系统架构
    this.getDict('system_validation','sysValidation')// 系统验证方式
    this.getDict('network_environment','netEnv')// 网络环境
    this.getRegionList()
    this.getDetails()
  },
  methods: {
    // 根据参数判断是添加还是编辑
    getDetails(){
      if(this.$route.query.type === 'add'){
        console.log('add')
      }else{
        this.loading = true
        this.$get(this.$Api.detailsOperation, {
          id:this.$route.query.id
        })
          .then(res => {
            if(res.data.statusCode === 200){
              let data = res.data.data
              this.ruleForm = {
                sysName: data.sysName,
                deployLevel:data.deployLevel,
                areaName:data.areaName,
                areaCode:data.areaCode,
                areaId:data.areaId,
                sysFrame:data.sysFrame,
                sysCompany:data.sysCompany,
                technologyName:data.technologyName,
                technologyTel:data.technologyTel,
                businessName:data.businessName,
                businessTel:data.businessTel,
                checkAuthSys:data.checkAuthSys,
                checkAuthTest:data.checkAuthTest,
                checkPubSys:data.checkPubSys,
                checkPubTest:data.checkPubTest,
                // 审批端正式环境
                authProdUrl:data.authProdUrl,
                authProdNetwork:data.authProdNetwork,
                authProdVerifyType:data.authProdVerifyType.split(","), // 后端要求为字符串'1,2,3'
                authProdAcquireResult:data.authProdAcquireResult,
                authProdOtherVerify:data.authProdOtherVerify,
                // 审批端测试环境
                authTestUrl:data.authTestUrl,
                authTestNetwork:data.authTestNetwork,
                authTestVerifyType:data.authTestVerifyType.split(","),
                authTestAcquireResult:data.authTestAcquireResult,
                authTestOtherVerify:data.authTestOtherVerify,
                // 公共端正式环境
                publicProdUrl:data.publicProdUrl,
                publicProdNetwork:data.publicProdNetwork,
                publicProdVerifyType:data.publicProdVerifyType.split(","),
                publicProdAcquireResult:data.publicProdAcquireResult,
                publicProdOtherVerify:data.publicProdOtherVerify,
                // 公共端测试环境
                publicTestUrl:data.publicTestUrl,
                publicTestNetwork:data.publicTestNetwork,
                publicTestVerifyType:data.publicTestVerifyType.split(","),
                publicTestAcquireResult:data.publicTestAcquireResult,
                publicTestOtherVerify:data.publicTestOtherVerify
              }
              this.loading = false
            }
          })
          .catch(()=>{
            this.loading = false
          })
      }
    },
    submitForm(formName) {
      let _url , _method ,_id
      if(this.$route.query.type === 'add'){// 新增
        _url = this.$Api.addOperation
        _method = 'POST'
        _id = undefined
      }else{// 更新
        _url = this.$Api.updateOperation
        _method = 'PUT'
        _id = this.$route.query.id
      }
      let params = {
        id:_id,
        areaCode:this.ruleForm.areaCode,
        areaId:this.ruleForm.areaId,
        areaName:this.ruleForm.areaName,
        sysFrame:this.ruleForm.sysFrame,
        sysName:this.ruleForm.sysName,
        deployLevel:this.ruleForm.deployLevel,
        // 以上为必填
        sysCompany:this.ruleForm.sysCompany,
        technologyName:this.ruleForm.technologyName,
        technologyTel:this.ruleForm.technologyTel,
        businessName:this.ruleForm.businessName,
        businessTel:this.ruleForm.businessTel,
        checkAuthSys:this.ruleForm.checkAuthSys,
        checkAuthTest:this.ruleForm.checkAuthTest,
        checkPubSys:this.ruleForm.checkPubSys,
        checkPubTest:this.ruleForm.checkPubTest,
        // 审批端正式环境
        authProdUrl:this.ruleForm.authProdUrl,
        authProdNetwork:this.ruleForm.authProdNetwork,
        authProdVerifyType:this.ruleForm.authProdVerifyType.join(), // 后端要求为字符串'1,2,3'
        authProdAcquireResult:this.ruleForm.authProdAcquireResult,
        authProdOtherVerify:this.ruleForm.authProdOtherVerify,
        // 审批端测试环境
        authTestUrl:this.ruleForm.authTestUrl,
        authTestNetwork:this.ruleForm.authTestNetwork,
        authTestVerifyType:this.ruleForm.authTestVerifyType.join(),
        authTestAcquireResult:this.ruleForm.authTestAcquireResult,
        authTestOtherVerify:this.ruleForm.authTestOtherVerify,
        // 公共端正式环境
        publicProdUrl:this.ruleForm.publicProdUrl,
        publicProdNetwork:this.ruleForm.publicProdNetwork,
        publicProdVerifyType:this.ruleForm.publicProdVerifyType.join(),
        publicProdAcquireResult:this.ruleForm.publicProdAcquireResult,
        publicProdOtherVerify:this.ruleForm.publicProdOtherVerify,
        // 公共端测试环境
        publicTestUrl:this.ruleForm.publicTestUrl,
        publicTestNetwork:this.ruleForm.publicTestNetwork,
        publicTestVerifyType:this.ruleForm.publicTestVerifyType.join(),
        publicTestAcquireResult:this.ruleForm.publicTestAcquireResult,
        publicTestOtherVerify:this.ruleForm.publicTestOtherVerify
      }
      // console.log(params)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios({
            method: _method,
            url:_url,
            data:params
          })
          .then(res => {
              if(res.data.statusCode === 200){
                this.$message({
                  message: '保存成功！',
                  type: 'success'
                });
                this.$router.push({path:'/clopedia/businessIndex'})
              }
            }).catch(err => {
              console.log(err)
            })
        }
      });
    },
    // 获取字典
    async getDict(type,arrName){
      let res = await this.$get(this.$Api.sysDict+type)
      this[arrName] = res.data.data
    },
    // 清除地区筛选条件
    clearArea(){
      this.ruleForm.areaId = '';
      this.ruleForm.areaName = ''
      this.ruleForm.areaCode = ''
      this.currentRegionId = '';
      this.orgData=[];
      this.$refs.orgChild.childReset(); // 清除地区，同时清除机构筛选条件
    },
    // 子组件返回选中参数(区域id)
    getAreaNode(params){
      this.ruleForm.areaId = params.id;
      this.ruleForm.areaName = params.value;
      this.ruleForm.areaCode = params.code;
      this.currentRegionId = params.id;
    },
    // 获取地区下拉列表
    getRegionList(){
      this.areaData = [];
      commonApi.getLoginAreaTreeList().then( res=> {
        if(res.data.statusCode == '200'){
          this.areaData = res.data.data;
        } else {
          if(res.data.msg.length > 20){
            this.$message.error('服务器接口异常，请联系管理员');
          } else {
            this.$message.error(res.data.msg);
          }
        }
      })
    },
    backPage(){
      this.$router.push({path:'/clopedia/businessIndex'})
    }
  }

}
</script>

<style lang="scss">
#businessAdd {
  .content-box {
    padding: 20px;
    padding-right: 200px;
  }
  .button-box {
    text-align: center;
    margin-top: 40px;
    .el-button {
      margin: 0 20px;
    }
  }
  .el-form-item {
    display: flex;
    .el-form-item__label {
      width: 180px !important;
    }
    .el-form-item__content {
      flex: 1;
      margin-left: 0 !important;
    }
  }
  .fifty {
    .title {
      width: 180px;
      text-align: right;
      font-size: 14px;
      color: #606266;
      padding-right: 12px;
    }
  }
  .box-card {
    margin-bottom: 20px;
    .el-card__header {
      padding: 10px 20px;
    }
  }
}
</style>